<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1440, minimum-scale=0.1, maximum-scale=10, user-scalable=no" />
    <meta name="color-scheme" content="light" />
    <meta name="full-screen" content="yes" />
    <link rel="icon" href="favicon.ico" />
    <title>中数智算</title>
  </head>
  <body>
    <script src="./lib/qrcode.min.js"></script>
    <script src="./lib/vue.global.min.js"></script>
    <link rel="stylesheet" href="./lib/element-plus/index.css" />
    <script src="./lib/element-plus/index.full.min.js"></script>
    <script src="./lib/element-plus/locale/zh-cn.js"></script>
    <script src="./lib/Application.umd.js"></script>
    <script src="./lib/apiDoc.js"></script>

    <!-- 表单页面组件 -->
    <template id="AccountDesign">
      <div class="account-design flex-column" v-loading="loading">
        <el-form :model="form" :rules="rules" :label-width="100" ref="formRef">
          <el-form-item label="用户账号" prop="zgu_userName">
            <el-input v-model.trim="form.zgu_userName" :maxlength="50" placeholder="请输入用户账号(手机号)"></el-input>
          </el-form-item>
          <el-form-item label="账号密码" prop="zgu_password">
            <el-input v-model.trim="form.zgu_password" :maxlength="50" placeholder="请输入账号密码"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="zgu_name">
            <el-input v-model.trim="form.zgu_name" :maxlength="50" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="zgu_right">
            <el-radio-group v-model="form.zgu_right">
              <el-radio-button label="write">可记录</el-radio-button>
              <el-radio-button label="read">可查看</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div class="form-action text-center">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </el-form>
      </div>
    </template>
    <script>
      var AccountDesign = {
        extends: BaseComponent,
        template: "#AccountDesign",
        name: "AccountDesign",
        props: ["design"],
        emits: ["close"],
        inject: ["$upper"],
        data() {
          return {
            loading: false,
            form: this.design || { zgu_right: "read" },
            rules: {
              zgu_name: [
                {
                  required: true,
                  message: "请输入"
                }
              ],
              zgu_userName: [
                {
                  required: true,
                  message: "请输入"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                },
                window.$g.validator.phone
              ],
              zgu_password: [
                {
                  required: true,
                  message: "请输入密码"
                },
                window.$g.validator.noChinese
              ],
              zgu_right: [
                {
                  required: true,
                  message: "请选择权限"
                }
              ]
            }
          };
        },
        computed: {},
        created() {
          // this.getData();
        },
        methods: {
          cancel() {
            this.$emit(`close`);
          },
          save() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                let param = this.form;
                let key = param.zgu_id ? "sq_team_admin.UpdateGorvermentAdmin" : "sq_team_admin.InsertGorvermentAdmin";
                param.zg_id = window.zg_id; //部门id
                this.loading = true;
                this.$g.ajax.$api(key, param).then((result) => {
                  console.debug("[save]", result, param);
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  result.status == "success" && this.$emit(`close`, "refresh");
                });
              } else {
                // this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                return false;
              }
            });
          }
        }
      };
    </script>
    <style>
      .account-design {
      }
    </style>
    <!-- 管理页面组件 -->
    <template id="AccountManage">
      <div class="account-manage flex-column app-page" v-loading="loading">
        <div class="page-head action-bar flex-row-between flex-row-center">
          <div>团队名称 : {{ gorvermentName || "无" }}</div>
          <el-button type="primary" @click="setDesign({zgu_right:'read'})">成员添加</el-button>
        </div>
        <div class="page-body">
          <div class="action-bar flex-row-between flex-row-center">
            <el-space class="flex-row-center">
              <span>成员姓名</span>
              <el-input placeholder="请输入" v-model.trim="query.zgu_name" :maxlength="50"></el-input>
              <el-button type="primary" @click="getData()">查询</el-button>
              <el-button @click="query.zgu_name=null">重置</el-button>
            </el-space>
          </div>
          <el-table :data="data" :border="false" :stripe="true">
            <!-- <el-table-column type="index" label="#" width="50px" :resizable="false"></el-table-column> -->
            <el-table-column prop="zgu_name" label="成员姓名"></el-table-column>
            <el-table-column prop="zg_name" label="所属团队"></el-table-column>
            <el-table-column prop="zgu_userName" label="联系方式(账号)"></el-table-column>
            <el-table-column prop="zgu_password" label="账号密码"></el-table-column>
            <el-table-column prop="zgu_right" label="成员权限">
              <template #default="scoped">{{scoped.row.zgu_right=='write'?"可记录":"可查看"}}</template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="140px" align="center">
              <template #default="scoped">
                <el-button type="primary" plain size="small" @click="getDesign(scoped.row)">编辑</el-button>
                <el-button type="danger" plain size="small" @click="remove(scoped.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          width="500px"
          :title="design && design.zgu_id ? '成员编辑' : '成员添加'"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :model-value="design ? true : false"
          @close="setDesign()"
        >
          <Account-Design v-if="design" :design="design" @close="(refresh)=>{setDesign();refresh&&getData();}"></Account-Design>
        </el-dialog>
      </div>
    </template>
    <script>
      window.zg_id = new URLSearchParams(location.search).get("zg_id"); //部门id
      if (!window.zg_id) {
        ElementPlus.ElNotification({ title: "错误信息", message: "没有部门id", type: "error" });
      }
      var AccountManage = {
        template: "#AccountManage",
        extends: BaseComponent,
        name: "AccountManage",
        components: { AccountDesign },
        data() {
          return {
            design: null,
            loading: false,
            gorvermentName: "",
            //列表查询条件
            query: {
              id: window.zg_id //主管部门Id
            },
            result: null
          };
        },
        provide() {
          // this.$g.toast.ctx = ElMessage;
          return {
            $upper: this
          };
        },
        computed: {
          data() {
            return ((this.result || {}).data || []).filter((item) => !this.query.zgu_name || item.zgu_name.includes(this.query.zgu_name));
          }
        },
        watch: {
          nodeActive: {
            handler(fresh, old) {
              fresh && this.getList();
            },
            immediate: true
          }
        },
        created() {
          this.getData();
          this.getGorvermentNameById();
        },
        methods: {
          setDesign(design) {
            this.design = design;
          },
          getDesign(item) {
            this.loading = true;
            this.$g.ajax.$api("sq_team_admin.GetGorvermentAdminById", { id: item.zgu_id }).then((result) => {
              console.debug("[getDesign]", result, item);
              this.loading = false;
              result && this.setDesign(result.data);
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },
          remove(item) {
            console.debug(item);
            this.$confirm("是否删除当前项？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.loading = true;
                this.$g.ajax.$api("sq_team_admin.DeleteGorvermentAdmin", { id: item.zgu_id }).then((result) => {
                  console.debug("[remove]", result, item);
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  result.status == "success" && this.getData();
                });
              })
              .catch(() => {});
          },
          getGorvermentNameById() {
            this.$g.ajax.$api("sq_team_admin.GetGorvermentNameById", { id: this.query.id }).then((result) => {
              console.debug("[sq_team_admin.GetGorvermentNameById]", result);
              // this.loading = false;
              this.gorvermentName = result.data;
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },
          getData() {
            this.loading = true;
            this.$g.ajax.$api("sq_team_admin.GetAdminList", this.query).then((result) => {
              console.debug("[sq_team_admin.GetAdminList]", result);
              this.loading = false;
              this.result = result;
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          }
        }
      };
    </script>
    <style>
      .account-manage {
        flex-grow: 1;
        background-color: #eff2f9;
        z-index: 1;
      }
      .account-manage .el-table {
        --el-table-header-bg-color: var(--el-table-row-hover-bg-color);
        --el-table-border-color: #fff0;
      }
    </style>
    <!-- 接口配置 -->
    <script>
      window.$g.ajax.apiDoc.sq_team_admin = {
        GetAdminList: {
          name: "获得主管部门下的用户列表",
          url: "api/sq_team_admin/GetAdminList",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetGorvermentNameById: {
          name: "获得主管部门的名称",
          url: "api/sq_team_admin/GetGorvermentNameById",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetGorvermentAdminById: {
          name: "根据id返回一个主管部门用户对象",
          url: "api/sq_team_admin/GetGorvermentAdminById", //GET /api/sq_team_admin/GetGorvermentAdminById
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertGorvermentAdmin: {
          name: "添加一个主管部门用户对象",
          url: "api/sq_team_admin/InsertGorvermentAdmin", //POST /api/sq_team_admin/InsertGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateGorvermentAdmin: {
          name: "更新主管部门用户",
          url: "api/sq_team_admin/UpdateGorvermentAdmin", //POST /api/sq_team_admin/UpdateGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteGorvermentAdmin: {
          name: "删除主管部门用户",
          url: "api/sq_team_admin/DeleteGorvermentAdmin", //POST /api/sq_team_admin/DeleteGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        }
      };
    </script>
    <!-- 页面渲染入口 -->
    <link rel="stylesheet" href="./lib/app.css" />
    <div id="app" class="abs app flex-column"></div>
    <template id="dom-app">
      <Account-Manage></Account-Manage>
    </template>
    <script>
      window.$message = ElementPlus.ElMessage;
      var App = {
        extends: BaseComponent,
        template: "#dom-app",
        components: { AccountManage }
      };
      var app = Vue.createApp(Application, { app: App }); //渲染入口
      app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //ui库
      app.use(Application); //公共组件库
      window.$app = app;
      window.app = app.mount("#app");
    </script>
  </body>
</html>
